import React, { Component, Suspense } from "react"
import { Link, Switch, Route } from "react-router-dom"
// import Message from "../Message"
// import News from "../News"
import "./index.css"

// const Message = React.lazy(() => import("../Message/index.js"))
// const News = React.lazy(() => import("../News/index.js"))
export default class Home extends Component {
  render() {
    return (
      <div>
        <h2 className="title">Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <Link to="/home/news">News</Link>
            </li>
            <li>
              <Link to="/home/message">Message</Link>
            </li>
          </ul>
          <div>
            <div>
              <Suspense fallback={<h3>正在加载，请稍等...</h3>}>
                <Switch>
                  {this.props.subRoute &&
                    this.props.subRoute.map((item) => {
                      return (
                        <Route
                          key={item.path}
                          path={item.path}
                          render={(props) => (
                            <item.component
                              {...props}
                              subRoute={item.children}
                            ></item.component>
                          )}
                        ></Route>
                      )
                    })}
                </Switch>
              </Suspense>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
